<template>
    <div>
      <headCommod/>
      <div ref="userinfo" class="container userinfo cl">
        <div class="left to-right">
          <asideCommod/>
        </div>
        <div class="right">
          <breadcrumbCommod class="to-bottom" title="账号管理"/>
          <div class="main bg-white to-left">
            <div class="info">
              <div class="tx">
                <img src="../assets/images/icon/icon24.png" alt="">
              </div>
              <el-button size="mini" type="success" plain>点击上传</el-button>
              <p class="explain">只能上传jpg/png文件<br/>且不超过1MB</p>
              <br/>
              <br/>
              <el-input v-model="input" placeholder="手机号"></el-input>
              <br/>
              <br/>
              <el-input v-model="input" placeholder="邮箱"></el-input>
              <br/>
              <br/>
              <el-button type="success" plain>更新信息</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import headCommod from '../components/Head'
import asideCommod from '../components/Aside'
import breadcrumbCommod from '../components/Breadcrumb'

export default {
  name: 'accountManagement',
  data () {
    return {
    }
  },
  mounted () {
  },
  components: {
    headCommod,
    asideCommod,
    breadcrumbCommod
  }
}
</script>

<style scoped>
 .info {
   background: #fff;
   /*border-radius: 10px;*/
   margin: 30px 0;
   width: 230px;
   text-align: center;
   padding: 20px 10px;
   /*border: 1px solid #ddd;*/
   margin-left: 10px;
 }

  .tx {
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    margin: 20px auto;
  }

 .tx img {
   position: relative;
   top: 10px;
   opacity: 0.5;
 }

  .explain {
    color: #999;
    font-size: 11px;
    margin: 10px 0;
  }

  .main {
    margin-top: 10px;
  }
</style>
